<!--评论组件 -->  
<template>
    <div>
        <h4>发表评论</h4>
        <hr>
        <textarea placeholder="请输入内容(最多可写120个字)" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" @click="postMsg">发表评论</mt-button>
      

        <!-- 评论列表区域 -->
        <div class="cmt-list">
            <div class="cmt-item" v-for="(item,i) in cmtlist" :key="i">
                <div class="cmt-item-title">
                    第{{i+1}}楼&nbsp;用户:{{item.user_name}}&nbsp;发表时间:{{item.add_time|dataFormat}}
                </div>
                 <div class="cmt-item-body">
                     {{item.content}}
                </div> 
            </div>
        </div>  

          <mt-button type="danger" size="large" plain @click="loadMore">加载更多</mt-button>

    </div>

</template>

<script>
//按需从MintUI导出需要的弹框组件
import {Toast} from 'mint-ui'

export default {
     data(){
         return {
             page:1, //默认展示第一面的评论
             cmtlist:[],//评论数组
             msg:''//即将发表的评论内容
         }
     },
     props:['newsid'],//接受父组件传递过来的id
     created(){
         this.getCommentByPage()
     },
     methods:{
         async getCommentByPage(){
             //根据页数来获取评论里的数据
             const {data} = await this.$http.get('/api/getcomments/'+this.newsid+'?pageindex='+this.page)
              if(data.status === 0){
                    //调用concat是为了加载更多后，使得下一页的内容接到上一个页面的内容
                     return (this.cmtlist=this.cmtlist.concat(data.message));
             } 
          
         },
         loadMore(){
             //点击按钮，加载更多评论
             //当触发这个加载更多方法的时候，page+1，在调用getCommentByPage方法
             this.page++;
             this.getCommentByPage();

         },
         async postMsg(){
             //点击发表评论
             //如果用户没有填写内容，则阻止其发表评论
             if(this.msg.trim().length<=0){//.trim()是去掉两边空白
                    return  Toast("请填写评论内容!")
             }
             //发表评论的逻辑
             const {data} = await this.$http.post('/api/postcomment/'+this.newsid,
                {content:this.msg.trim()
             });
             if(data.status === 0){
                 //刷新评论列表
                 //为了防止重新调用getCommentByPage()的时候会把之前的所有评论清空的问题
                 //我们在客户端手动拼接一个评论对象，并把这个评论对象，unshift(向数组开头添加元素) 到 cmtlist中
                 this.cmtlist.unshift({
                     user_name:'匿名用户',
                     add_time:new Date(),
                     content:this.msg.trim()
                 });
                 this.msg='';
             }
         }
     }
}
</script>

<style lang="scss" scoped>
    textarea{
        font-size: 14px;
        margin: 0;
    }
    .cmt-list{
        margin-top: 4px;
        .cmt-item{
            line-height: 30px;
            .cmt-item-title{
                font-size: 14px;
                background-color: #ddd;
            }
            .cmt-item-body{
                font-size: 14px;
                text-indent: 2em;
            }   
        }
    }
</style>